<template>
  <div>
    <div id="top">
      <div style="margin: 20px">
        <div style="float: left;width: 93%">
          <span id="username">Hi，{{ this.userInfo.adUserName }}，{{ times }}</span>
          <span id="loginOut" style="float: right;">{{ time }}</span>
        </div>

<!--        el-icon-arrow-up-->
<!--        <div style="float: left;font-size: 18px;margin: -10px 50px 0px 0px">-->
<!--          <span><el-button type="text" style="font-size: 18px;" @click="userInfoUpdate()">个人中心</el-button>&nbsp;&nbsp;&nbsp;&nbsp;<i id="info" class="el-icon-arrow-down"></i></span>-->
<!--        </div>-->

        <div style="float: left;font-size: 18px;margin: -10px -100px 0px 0px">
          <span><el-button type="text" style="font-size: 18px;" @click="logut()">退出&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-switch-button"></i></el-button></span>
        </div>
        <div style="overflow: hidden"></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
// import {MessageBox} from "element-ui";
export default {
  name: 'top',

  data() {
    return {
      username: "断尘",
      time: "上午好",
      times:"",
      userInfo:{
        adId:'',
        adUserName:'',
        adStatus:'',
      },
      token: '',
    };
  },

  mounted() {
    // this.getUserInfo()
    this.getTime()
    this.userInfo = JSON.parse(sessionStorage.getItem("user"))
    this.$nextTick(() => {
      setInterval(this.getTime, 1000);
    });
    const token = sessionStorage.getItem("token");
    this.token = `Bearer ${token}`
  },

  methods: {
    logut(){
      this.$router.push("/login")
      // this.$http({
      //   url: this.$http.adornUrl(`/reportApproval/admin/Logout`),
      //   method: 'get',
      //   params: {
      //     token: this.token
      //   },
      // }).then((data) => {
      //   console.log(data)
      //   if (data && data.code === 200) {
      //     MessageBox.confirm('确定要退出吗？', '确定登出', {
      //       confirmButtonText: '退出',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     }).then(() => {
      //       localStorage.removeItem("token")
      //       localStorage.removeItem("userInfo")
      //       this.$message.error(data.data.data)
      //
      //     })
      //   }else{
      //     this.$message.error(data.msg)
      //   }
      // })
    },
    // getUserInfo(){
    //   let token = localStorage.getItem("token");
    //   this.$http({
    //     url: this.$http.adornUrl(`/fiction/tbadmin/getAdminInfo/${token}`),
    //     method: 'get',
    //     params: this.$http.adornParams()
    //   }).then((data) => {
    //     console.log(data)
    //     if (data && data.code === 200) {
    //       localStorage.setItem("userInfo",data.tbAdmin)
    //       this.userInfo.adId = data.tbAdmin.adId
    //       this.userInfo.adUserName = data.tbAdmin.adUserName
    //       this.userInfo.adStatus = data.tbAdmin.adStatus
    //     }else{
    //       this.getCaptcha();
    //       this.$message.error(data.msg)
    //     }
    //   })
    // },
    getTime(){
      const currentDate = moment();
      console.log()
      const formattedDate = currentDate.format('YYYY-MM-DD HH:mm:ss');
      this.time = formattedDate
      let times = formattedDate.substring(11);
      // console.log(times)
      if (times.substring(0,2) < 12){
        this.times = "上午好"
      }
      if (times.substring(0,2) >= 12 && times.substring(0,2) <= 14){
        this.times = "中午好"
      }
      if (times.substring(0,2) >= 14){
        this.times = "下午好"
      }
      if (times.substring(0,2) >= 16){
        this.times = "晚上好"
      }
      if (times.substring(0,2) > 0 && times.substring(0,2) <= 12){
        this.times = "凌晨好"
      }
      // console.log(formattedDate);
    },
  },
};
</script>

<style scoped>
#top{
  height: 30px;
  background: #ffffff;
}
#username{
  margin: 15px 20px 20px 50px;
  font-size: 20px;
}
#loginOut{
  margin: 0px 20px 20px 50px;
  margin-right: 50px;
  font-size: 20px;
}
</style>
